<template>
    <div class="pop-participating-regions">
        <el-drawer
            title="选择可参与地区"
            :visible.sync="is_drawer"
            class="drawer-box"
        >
            <div class="context-box">
                <div class="list-left">
                    <div class="title-box">选择地区</div>
                    <div class="list-box comm-list">
                        <el-tree
                            :props="props"
                            :data="dataleft"
                            show-checkbox
                            @check-change="leftChange"
                            :default-expand-all="true"
                        >
                        </el-tree>
                    </div>
                </div>
                <div class="but-box">
                    <div class="but">
                        <el-button
                            type="primary"
                            icon="el-icon-arrow-right"
                            size="mini"
                            @click="rightClick"
                        ></el-button>
                    </div>
                    <div class="but">
                        <el-button
                            type="primary"
                            icon="el-icon-arrow-left"
                            size="mini"
                            @click="leftClick"
                        ></el-button>
                    </div>
                </div>
                <div class="list-right">
                    <div class="title-box">可参与地区</div>
                    <div class="list-box comm-list">
                        <el-tree
                            :props="props"
                            :data="dataright"
                            show-checkbox
                            @check-change="rightChange"
                            :default-expand-all="true"
                        >
                        </el-tree>
                    </div>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script>
// import xxx from '@/components/comm/xxx.vue';
import config from "@/js/conf/Config.js";

export default {
    props: ["form"],
    components: {},
    computed: {},
    data() {
        return {
            is_drawer: false,
            props: {
                label: "name",
                children: "cityList",
            },
            dataleft: [],
            dataright: [], //右边已存在的数据

            leftChangeData: [], //左边选中但还没移动的数据
            rightChangeData: [], //右边边选中但还没移动的数据
        };
    },
    created() {
        this.getdistrictsData();
    },
    mounted() {},
    watch: {
        dataright(val) {
            this.form.if_district = val;
        },
    },
    methods: {
        initData() {
            this.is_drawer = true;
            if (this.dataleft.length == 0) {
                this.getdistrictsData();
            }
        },
        // 获取行政区
        async getdistrictsData() {
            let param = {};
            let url = config.COMM_DISTRICTS;
            let res = await this.$api({ url: url, data: param });
            if (!res) return;
            if (res.status == 1 && res.data) {
                res.data.map((v) => {
                    v.cityList.map((vs) => {
                        vs.fcode = v.code;
                        delete vs.cityList;
                    });
                });
                this.dataleft = res.data;
                if (this.form.if_district && this.form.if_district.length > 0) {
                    this.form.if_district.map((v) => {
                        if (v.cityList) {
                            v.cityList.map((vs) => {
                                this.leftChangeData.push({
                                    name: vs.name,
                                    code: vs.code,
                                    fcode: v.code,
                                });
                            });
                        }
                    });
                }
                this.rightClick();
            }
        },

        // 左边选中
        leftChange(data, checked, indeterminate) {
            this.selectfun(data, checked, indeterminate, "leftChangeData");
        },
        // 右边选中
        rightChange(data, checked, indeterminate) {
            this.selectfun(data, checked, indeterminate, "rightChangeData");
        },
        // 添加到右边
        rightClick() {
            this.setlrData("leftChangeData", "dataleft", "dataright");
        },
        // 添加到左边
        leftClick() {
            this.setlrData("rightChangeData", "dataright", "dataleft");
        },
        // 选中方法
        selectfun(data, checked, indeterminate, changeData) {
            if (checked) {
                if (data.cityList) {
                    if (!indeterminate) {
                        this[changeData] = this[changeData].concat(
                            data.cityList
                        );
                    }
                } else {
                    this[changeData].push(data);
                }
            } else {
                if (data.cityList) {
                    if (!indeterminate) {
                        data.cityList.map((vs) => {
                            this[changeData].map((v, i) => {
                                if (vs.code == v.code) {
                                    this[changeData].splice(i, 1);
                                }
                            });
                        });
                    }
                } else {
                    this[changeData].map((v, i) => {
                        if (v.code == data.code) {
                            this[changeData].splice(i, 1);
                        }
                    });
                }
            }
            this[changeData] = [
                ...new Set(this[changeData].map((e) => JSON.stringify(e))),
            ].map((e) => JSON.parse(e));
        },
        // 添加方法
        setlrData(changeData, dataName1, dataName2) {
            if (this[changeData].length == 0) return;
            let arr = [];
            let arr2 = [];
            this[dataName1].map((v, i) => {
                this[changeData].map((vw) => {
                    v.cityList.map((vs, is) => {
                        if (vw.code == vs.code) {
                            v.cityList.splice(is, 1);
                        }
                    });
                });
                arr.push({
                    name: v.name,
                    code: v.code,
                    cityList: [],
                });
            });
            arr.map((v, i) => {
                this[changeData].map((vs) => {
                    if (vs.fcode == v.code) {
                        v.cityList.push({
                            name: vs.name,
                            code: vs.code,
                            fcode: vs.fcode,
                        });
                    }
                });
                if (v.cityList.length > 0) {
                    arr2.push(v);
                }
            });
            if (this[dataName2].length > 0) {
                this[dataName2].map((v) => {
                    arr2.map((vs) => {
                        if (v.code == vs.code) {
                            v.cityList = v.cityList.concat(vs.cityList);
                        } else {
                            this[dataName2].push(vs);
                        }
                    });
                });
            } else {
                this[dataName2] = arr2;
            }
            for (let i = 0; i < this[dataName1].length; i++) {
                if (this[dataName1][i].cityList.length == 0) {
                    this[dataName1].splice(i, 1);
                    i--;
                }
            }
            this[changeData] = [];
            this[dataName2] = this.removeDuplicateObj(this[dataName2]);
            this[dataName2].sort((a, b) => {
                return a.code - b.code;
            });
        },
        // 去重
        removeDuplicateObj(arr) {
            let obj = {};
            arr = arr.reduce((newArr, next) => {
                obj[next.code]
                    ? ""
                    : (obj[next.code] = true && newArr.push(next));
                return newArr;
            }, []);
            return arr;
        },
    },
};
</script>

<style lang="scss" scoped >
.context-box {
    height: 780px;
    display: flex;
    padding: 0 20px;
    .list-left,
    .list-right {
        height: 100%;
        width: 50%;
        border: 1px solid #dcdcdc;
        .title-box {
            border-bottom: 1px solid #dcdcdc;
            padding: 10px;
            font-size: 14px;
        }
        ::v-deep.list-box {
            height: calc(100% - 46px);
            .el-tree {
                .el-checkbox {
                    margin-right: 10px;
                }
                .is-indeterminate {
                    .el-checkbox__inner {
                        background: none;
                        border-color: #dcdfe6;
                    }
                }
            }
        }
    }
    .but-box {
        width: 45px;
        height: 100%;
        margin: 0 20px;
        display: flex;
        flex-wrap: wrap;
        align-content: center;

        .but {
            width: 100px;
            margin-bottom: 10px;
        }
    }
}
</style>
